<template>
    <view>
        <view v-if="!url"  class="text-img" :style="{background:color, width: width + 'rpx' || '90rpx', height: height + 'rpx' || '90rpx', 'line-height': height + 'rpx','font-size':height/3 + 'rpx'}">
            {{ name.substring(name.length-2,name.length) }}
        </view>
        <!--  {width:{{ width }}rpx, height:{{ height }}rpx;line-height:{{ height }}rpx;font-size:{{height/3}}rpx} -->
        <image
            v-if="url"
            class="text-img"
            :style="{ width: width + 'rpx' || '90rpx', height: height + 'rpx' || '90rpx', 'line-height': height + 'rpx','font-size':height/3 + 'rpx'}"
            :src="url"
            mode="scaleToFill"
        />
    </view>
</template>
<script setup lang="ts">
import { ref, defineEmits } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
const colorList = ref(['#FFA500', '#008002', '#0D7DFF'])
const color = ref('')
const props = defineProps(['name', 'url', 'width', 'height'])
const emits = defineEmits(['cancel'])
defineExpose()

;(() => {
    console.log(props.name, 'name')
    color.value = colorList.value[Math.floor(Math.random() * 3)]
    console.log(color, 'color+-')
})()
</script>
<style scoped>
.text-img{
    width: 98rpx;
    height: 98rpx;
    border-radius: 50%;
    text-align: center;
    line-height: 98rpx;
    color: #ffffff;
    border: 1rpx solid #FFFFFF;
}
</style>
